<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ /*把间距都设置为0*/
            margin: 0;
            padding: 0;
        }
        body{
            width: 100%;
            height: 100%;
        }
        #button{
            display:inline;
            width: 180px;
            height: 30px;
            background-color: blanchedalmond;
            border-radius: 8px;
            float: left;
        }
        #button1{
            width: 60px;
            height: 30px;
            border-radius: 5px;
            background-color: #ec971f;
            line-height: 30px;
            position: relative;
            top:-10px;
            left:156px;
        }
        #talk{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 600px;
            background-color: rgba(0,0,0,0.5);
            display: none;
        }
        #chat_k{
            width: 300px;
            height: 400px;
            position: relative;
            top: 70px;
            left:550px;
            border-radius: 10px;
            border: black 1px solid;
            display: none;
            overflow: hidden;
            clear: both;
        }
        .chat{
            width: 100%;
            height: 50px;
            background-color: bisque;
        }
        #title{
            display: inline-block;
            line-height: 50px;
        }
        .l_t{
            width: 250px;
            height: 40px;
            margin: 10px 22px;
        }
    </style>
</head>
<body>
    <div>
        <button id = "button" onclick="opens()">点击模态框</button>  <!--设置按钮-->
        <div id = "talk"></div>
        <div id="chat_k"> <!--设置聊天框-->
            <div class ="chat"> <!--设置聊天框的上边框-->
                <span id="title">正在回复......</span> <!--设置文字，在边框左侧-->
                <button id = "button1" onclick="closes()">X</button> <!--设置关闭按钮-->
            </div>
            <div class ="chat" style="height: 260px;background-color:palegoldenrod">
            </div>
            <div class ="chat" style="height: 90px;background-color:#e3e3e3">
                <textarea class = "l_t"></textarea>
                <input type="submit" value="发送" style="margin-left: 260px">
            </div>
        </div>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        var op1 = document.getElementById("talk");
        var op2=document.getElementById("chat_k");
        function opens() {
            op1.style.display="block";
            op2.style.display="block"
        }
        function closes() {
            op1.style.display="none";
            op2.style.display="none"
        }
    </script>
</body>
</html>